<template>
	<view class="container">
		<!-- 表单内容 -->
		<view>
			<!-- 第一部分：活动信息 -->
			<view>
				<!-- 活动名称 -->
				<view class="form-row beijing">
					<view class="form-label">活动标题</view>
					<input class="form-input" placeholder="请输入活动标题" v-model="formData.activity_title" />
				</view>

				<!-- 活动类别 -->
				<view class="form-row beijing">
					<view class="form-label">活动类别</view>
					<picker class="form-picker" :range="categoryOptions" range-key="activity_category_name"
						@change="handleCategoryChange" :value="categoryIndex">
						<view class="picker-value">
							{{ formData.categoryName || '请选择活动类别' }}
						</view>
					</picker>
				</view>

				<!-- 活动地址 -->
				<view class="form-row beijing">
					<view class="form-label">活动地址</view>
					<view class="form-input" @click="showRegionPicker">
						{{ formData.regionText || '请选择省/市/区' }}
					</view>
				</view>

				<!-- 地址明细 -->
				<view class="beijing">
					<view class="form-label">详细地址</view>
					<textarea class="form-textarea" placeholder="街道、楼牌号等详细地址" v-model="formData.detailed_address"
						auto-height></textarea>
				</view>

				<!-- 活动封面图片（单图） -->
				<view class="beijing">
					<view class="form-label">活动封面</view>
					<view class="image-upload-container">
						<view class="image-item" v-if="formData.activity_cover_path">
							<image class="uploaded-image" :src="formData.activity_cover_path" mode="aspectFill"
								@click="previewImage('cover')"></image>
							<view class="delete-icon" @click.stop="deleteCoverImage">
								×
							</view>
						</view>
						<view class="upload-btn" @click="chooseCoverImage" v-if="!formData.activity_cover_path">
							<view>上传封面</view>
						</view>
					</view>
					<view class="image-hint">（建议上传1张图片作为活动封面）</view>
				</view>

				<!-- 活动内容 -->
				<view class="beijing">
					<view class="form-label">活动描述</view>
					<textarea class="form-textarea" placeholder="请输入活动描述" v-model="formData.activity_describe"
						auto-height></textarea>
				</view>

				<!-- 活动轮播图（多图） -->
				<view class="beijing">
					<view class="form-label">活动轮播图</view>
					<view class="image-upload-container">
						<view class="image-item" v-for="(image, imgIndex) in formData.activity_banner_arr"
							:key="imgIndex">
							<image class="uploaded-image" :src="image.activity_banner_path" mode="aspectFill"
								@click="previewCarouselImage(imgIndex)"></image>
							<view class="delete-icon" @click.stop="deleteCarouselImage(imgIndex)">
								×
							</view>
						</view>
						<view class="upload-btn" @click="chooseCarouselImage"
							v-if="formData.activity_banner_arr.length < 9">
							<view>上传图片</view>
						</view>
					</view>
					<view class="image-hint">（可上传1-9张轮播图）</view>
				</view>
			</view>
		</view>

		<view class="form-container">
			<!-- 第二部分：活动设置（可增减） -->
			<view class="form-section">
				<view class="form-title">
					<div></div>
					<view class="add-btn" @click="addSettingItem">
						<image src="https://shalong.taiyanyue.top/images/fa5-plus-fas1.png" class="btn-icon"></image>
						<text>添加活动时段</text>
					</view>
				</view>

				<!-- 动态活动设置项 -->
				<view class="setting-list">
					<view class="setting-item" v-for="(item, index) in formData.activity_spec_arr" :key="index">
						<view class="item-header">
							<view class="item-title"></view>
							<view class="delete-btn" v-if="index > 0" @click="removeSettingItem(index)">
								<image src="https://shalong.taiyanyue.top/images/fa5-minus-fas2.png" class="btn-icon"></image>
							</view>
						</view>

						<!-- 活动日期 -->
						<view class="form-row">
							<view class="form-label">活动日期</view>
							<picker mode="date" class="form-picker" :value="item.activity_at"
								@change="handleDateChange(index, 'activity_at', $event)">
								<view class="picker-value">
									{{ item.activity_at || '请选择活动日期' }}
								</view>
							</picker>
						</view>

						<!-- 时间段设置 -->
						<view class="form-section" v-for="(timeSlot, timeIndex) in item.activity_spec_time_arr"
							:key="timeIndex">
							<view class="item-header" v-if="item.activity_spec_time_arr.length > 1">
								<view class="item-title">时间段{{ timeIndex + 1 }}</view>
								<view class="delete-btn" v-if="timeIndex > 0" @click="removeTimeSlot(index, timeIndex)">
									<image src="https://shalong.taiyanyue.top/images/fa5-minus-fas2.png" class="btn-icon"></image>
								</view>
							</view>

							<!-- 开始时间 -->
							<view class="form-row">
								<view class="form-label">开始时间</view>
								<picker mode="time" class="form-picker" :value="timeSlot.activity_start_at"
									@change="handleTimeChange(index, timeIndex, 'activity_start_at', $event)"
									fields="second">
									<view class="picker-value">
										{{ timeSlot.activity_start_at || '请选择开始时间' }}
									</view>
								</picker>
							</view>

							<!-- 结束时间 -->
							<view class="form-row">
								<view class="form-label">结束时间</view>
								<picker mode="time" class="form-picker" :value="timeSlot.activity_end_at"
									@change="handleTimeChange(index, timeIndex, 'activity_end_at', $event)"
									fields="second">
									<view class="picker-value">
										{{ timeSlot.activity_end_at || '请选择结束时间' }}
									</view>
								</picker>
							</view>

							<!-- 活动价格 -->
							<view class="form-row">
								<view class="form-label">价格/位</view>
								<input class="form-input" type="number" placeholder="请输入价格"
									v-model="timeSlot.activity_price" />
							</view>

							<!-- 总名额 -->
							<view class="form-row">
								<view class="form-label">总名额</view>
								<input class="form-input" type="number" placeholder="请输入名额"
									v-model="timeSlot.activity_people_number" />
							</view>
						</view>

						<!-- 添加时间段按钮 -->
						<view class="add-btn" @click="addTimeSlot(index)" style="margin-top: 10px;">
							<image src="https://shalong.taiyanyue.top/images/fa5-plus-fas1.png" class="btn-icon"></image>
							<text>添加时间段</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部提交按钮 -->
		<view class="fixed-bottom" style="z-index: 99999;">
			<view v-if="activity_id" class="submit-btn" @click="handleSubmit">
				修改活动
			</view>
			<view v-else class="submit-btn" @click="handleSubmit">
				提交活动
			</view>
		</view>

		<!-- 地区选择器弹窗 -->
		<uni-popup ref="regionPopup" type="bottom">
			<view class="region-picker">
				<view class="picker-header">
					<view class="picker-action" @click="cancelRegionSelect">取消</view>
					<view class="picker-title">选择地区</view>
					<view class="picker-action" @click="confirmRegionSelect">确定</view>
				</view>
				<picker-view :value="regionValue" @change="handleRegionChange" class="picker-view">
					<picker-view-column>
						<view v-for="(item, index) in provinces" :key="item.district_id">{{ item.district_name }}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item, index) in cities" :key="item.district_id">{{ item.district_name }}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item, index) in areas" :key="item.district_id">{{ item.district_name }}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
		
		<!-- 确认收货弹框 -->
		<view class="custom-popup-mask" v-if="showConfirmPopup" @click.stop>
					<view class="custom-popup">
						<view class="popup-header">
							<text class="popup-title">提示</text>
						</view>
						<view class="popup-content">
							<text class="popup-message">当前活动正在审核中！请稍后查看！</text>
						</view>
						<view class="popup-footer">
							<button class="confirm-btn" @click="submitConfirmReceipt">确认</button>
						</view>
					</view>
				</view>
		
	</view>
</template>

<script>
	import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue';
	import {
		common_getAreaList,
		activity_getHomeActivityCateList,
		common_OSSFileUpload,
		activity_userActivityInfoCreate,
		activity_getUserActivityInfo,
		activity_userActivityInfoUpdate
	} from '@/api/system/user.js'
	export default {
		components: { uniPopup },
		data() {
			return {
				uploading: false,
				formData: {
					activity_title: '',
					activity_cover_path: '',
					activity_describe: '',
					activity_category_id: null,
					categoryName: '',
					province_id: null,
					city_id: null,
					area_id: null,
					regionText: '',
					detailed_address: '',
					activity_banner_arr: [],
					activity_spec_arr: [{
						activity_at: '',
						activity_spec_time_arr: [{
							activity_start_at: '',
							activity_end_at: '',
							activity_price: '',
							activity_people_number: ''
						}]
					}],
				},
				categoryOptions: [],
				categoryIndex: -1,
				// 地区选择器数据
				provinces: [],
				cities: [],
				areas: [],
				regionValue: [0, 0, 0],
				selectedRegion: [],
				lastProvinceIndex: 0,
				lastCityIndex: 0,
				activity_id: "",
				showConfirmPopup: false
			}
		},
		created() {
			this.initData();

		},
		methods: {
			submitConfirmReceipt() {
							this.showConfirmPopup = false;
							uni.navigateBack(); // 返回上一页
						},
			async initData() {
				// 并行加载数据
				await Promise.all([
					this.getProvinces(),
					this.activity_getHomeActivityCateList(),
					this.activity_getUserActivityInfo()
				]);
			},
			async activity_getHomeActivityCateList() {
				const data = await activity_getHomeActivityCateList({
					page: 1,
					size: 999
				});
				this.categoryOptions = data.content.data;
			},
			async activity_getUserActivityInfo() {
				const data = await activity_getUserActivityInfo();
				if (data.code == 200) {
					// 合并返回的数据到formData
					Object.assign(this.formData, data.content.data);
					if (data.content.data.activity_id) {
						this.activity_id = data.content.data.activity_id;
					}
					if(data.content.data.activity_status==0){
						this.showConfirmPopup = true;
					}
					// 处理活动类别回显
					if (this.formData.activity_category_id) {
						console.log(this.categoryOptions, 99999)
						const index = this.categoryOptions.findIndex(
							item => item.activity_category_id === this.formData.activity_category_id
						);
						console.log(index, 99999)
						if (index !== -1) {
							console.log(123)
							this.categoryIndex = index;
							this.formData.categoryName = this.categoryOptions[index].activity_category_name;
						}
					}

					// 处理地区回显
					if (this.formData.province_id && this.formData.city_id && this.formData.area_id) {
						// 这里需要异步获取地区名称，因为地区数据可能还未加载
						this.$nextTick(() => {
							this.setRegionText();
						});
					}
				}
			},

			// 设置地区文本
			async setRegionText() {
				try {
					// 确保地区数据已加载
					if (this.provinces.length === 0) {
						await this.getProvinces();
					}

					const province = this.provinces.find(item => item.district_id === this.formData.province_id);
					if (province) {
						const provinceIndex = this.provinces.findIndex(item => item.district_id === this.formData
							.province_id);
						this.regionValue[0] = provinceIndex;

						await this.getCities(this.formData.province_id);
						const cityIndex = this.cities.findIndex(item => item.district_id === this.formData.city_id);
						this.regionValue[1] = cityIndex >= 0 ? cityIndex : 0;

						await this.getAreas(this.formData.city_id);
						const areaIndex = this.areas.findIndex(item => item.district_id === this.formData.area_id);
						this.regionValue[2] = areaIndex >= 0 ? areaIndex : 0;

						this.formData.regionText =
							`${province.district_name} ${this.cities[this.regionValue[1]].district_name} ${this.areas[this.regionValue[2]].district_name}`;
					}
				} catch (error) {
					console.error('设置地区文本失败:', error);
				}
			},


			// 获取省份列表
			async getProvinces() {
				try {
					const res = await common_getAreaList({
						parent_id: 0
					});
					this.provinces = res.content.data || [];
					if (this.provinces.length > 0) {
						await this.getCities(this.provinces[0].district_id);
					}
				} catch (error) {
					console.error('获取省份列表失败:', error);
				}
			},

			// 获取城市列表
			async getCities(provinceId) {
				try {
					const res = await common_getAreaList({
						parent_id: provinceId
					});
					this.cities = res.content.data || [];
					this.regionValue[1] = 0;
					this.regionValue[2] = 0;

					if (this.cities.length > 0) {
						await this.getAreas(this.cities[0].district_id);
					} else {
						this.areas = [];
					}
				} catch (error) {
					console.error('获取城市列表失败:', error);
				}
			},

			// 获取区县列表
			async getAreas(cityId) {
				try {
					const res = await common_getAreaList({
						parent_id: cityId
					});
					this.areas = res.content.data || [];
					this.regionValue[2] = 0;
				} catch (error) {
					console.error('获取区县列表失败:', error);
				}
			},

			handleCategoryChange(e) {
				const index = e.detail.value;
				this.categoryIndex = index;
				this.formData.categoryName = this.categoryOptions[index].activity_category_name;
				this.formData.activity_category_id = this.categoryOptions[index].activity_category_id;
			},

			handleDateChange(index, field, e) {
				this.$set(this.formData.activity_spec_arr[index], field, e.detail.value);
			},

			handleTimeChange(specIndex, timeIndex, field, e) {
				this.$set(this.formData.activity_spec_arr[specIndex].activity_spec_time_arr[timeIndex], field, e.detail
					.value);
			},

			// 添加新的活动时段
			addSettingItem() {
				this.formData.activity_spec_arr.push({
					activity_at: '',
					activity_spec_time_arr: [{
						activity_start_at: '',
						activity_end_at: '',
						activity_price: '',
						activity_people_number: ''
					}]
				});
			},

			// 删除活动时段
			removeSettingItem(index) {
				if (this.formData.activity_spec_arr.length > 1) {
					this.formData.activity_spec_arr.splice(index, 1);
				} else {
					uni.showToast({
						title: '至少保留一个活动时段',
						icon: 'none'
					});
				}
			},

			// 添加时间段
			addTimeSlot(specIndex) {
				this.formData.activity_spec_arr[specIndex].activity_spec_time_arr.push({
					activity_start_at: '',
					activity_end_at: '',
					activity_price: '',
					activity_people_number: ''
				});
			},

			// 删除时间段
			removeTimeSlot(specIndex, timeIndex) {
				const timeArr = this.formData.activity_spec_arr[specIndex].activity_spec_time_arr;
				if (timeArr.length > 1) {
					timeArr.splice(timeIndex, 1);
				} else {
					uni.showToast({
						title: '至少保留一个时间段',
						icon: 'none'
					});
				}
			},

			// 选择封面图片
			chooseCoverImage() {
				if (this.uploading) return;

				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						// 先显示本地选择的图片
						this.formData.activity_cover_path = tempFilePath;
						// 上传图片
						this.uploadImage(tempFilePath, 'cover');
					},
					fail: (err) => {
						console.error('选择图片失败:', err);
					}
				});
			},

			// 选择轮播图片
			chooseCarouselImage() {
				if (this.uploading) return;

				uni.chooseImage({
					count: 9 - this.formData.activity_banner_arr.length,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						tempFilePaths.forEach(path => {
							// 先显示本地选择的图片
							const tempImage = {
								activity_banner_path: path,
								activity_sort: this.formData.activity_banner_arr.length + 1
							};
							this.formData.activity_banner_arr.push(tempImage);
							// 上传图片
							this.uploadImage(path, 'carousel', tempImage);
						});
					}
				});
			},

			// 上传图片到OSS
			async uploadImage(filePath, type, tempImage = null) {
				this.uploading = true;
				uni.showLoading({
					title: '上传中...'
				});

				try {
					const res = await uni.uploadFile({
						url: 'https://shalong.taiyanyue.top/api/common/OSSFileUpload',
						filePath: filePath,
						name: 'file',
						formData: {},
						header: {
							// 'Authorization': 'Bearer ' + uni.getStorageSync('token')
						}
					});

					const data = JSON.parse(res[1].data);
					if (data.code === 200 && data.content && data.content.path) {
						if (type === 'cover') {
							this.formData.activity_cover_path = data.content.path;
						} else if (type === 'carousel' && tempImage) {
							tempImage.activity_banner_path = data.content.path;
						}
						uni.showToast({
							title: '上传成功',
							icon: 'none'
						});
					} else {
						throw new Error(data.message || '上传失败');
					}
				} catch (error) {
					console.error('上传失败:', error);
					uni.showToast({
						title: '上传失败',
						icon: 'none'
					});
					// 上传失败时回滚
					if (type === 'carousel' && tempImage) {
						const index = this.formData.activity_banner_arr.findIndex(item =>
							item.activity_banner_path === tempImage.activity_banner_path
						);
						if (index !== -1) {
							this.formData.activity_banner_arr.splice(index, 1);
						}
					}
				} finally {
					this.uploading = false;
					uni.hideLoading();
				}
			},

			// 预览封面图片
			previewImage(type) {
				if (type === 'cover' && this.formData.activity_cover_path) {
					uni.previewImage({
						current: this.formData.activity_cover_path,
						urls: [this.formData.activity_cover_path]
					});
				}
			},

			// 删除封面图片
			deleteCoverImage() {
				this.formData.activity_cover_path = '';
			},

			// 预览轮播图片
			previewCarouselImage(index) {
				const urls = this.formData.activity_banner_arr.map(item => item.activity_banner_path);
				uni.previewImage({
					current: urls[index],
					urls: urls
				});
			},

			// 删除轮播图片
			deleteCarouselImage(index) {
				this.formData.activity_banner_arr.splice(index, 1);
				// 重新排序
				this.formData.activity_banner_arr.forEach((item, idx) => {
					item.activity_sort = idx + 1;
				});
			},

			async handleSubmit() {
				// 表单验证
				if (!this.formData.activity_title) {
					uni.showToast({
						title: '请输入活动标题',
						icon: 'none'
					});
					return;
				}

				if (!this.formData.activity_category_id) {
					uni.showToast({
						title: '请选择活动类别',
						icon: 'none'
					});
					return;
				}

				if (!this.formData.province_id || !this.formData.city_id || !this.formData.area_id) {
					uni.showToast({
						title: '请选择完整活动地址',
						icon: 'none'
					});
					return;
				}

				if (!this.formData.detailed_address) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					});
					return;
				}

				if (!this.formData.activity_cover_path) {
					uni.showToast({
						title: '请上传活动封面',
						icon: 'none'
					});
					return;
				}

				if (this.formData.activity_banner_arr.length === 0) {
					uni.showToast({
						title: '请至少上传一张轮播图',
						icon: 'none'
					});
					return;
				}

				// 验证活动时段
				for (let i = 0; i < this.formData.activity_spec_arr.length; i++) {
					const spec = this.formData.activity_spec_arr[i];
					if (!spec.activity_at) {
						uni.showToast({
							title: `请填写活动时段${i + 1}的日期`,
							icon: 'none'
						});
						return;
					}

					// 验证时间段
					for (let j = 0; j < spec.activity_spec_time_arr.length; j++) {
						const timeSlot = spec.activity_spec_time_arr[j];
						if (!timeSlot.activity_start_at || !timeSlot.activity_end_at) {
							uni.showToast({
								title: `请填写活动时段${i + 1}的时间段${j + 1}的起止时间`,
								icon: 'none'
							});
							return;
						}

						if (timeSlot.activity_start_at >= timeSlot.activity_end_at) {
							uni.showToast({
								title: `活动时段${i + 1}的时间段${j + 1}结束时间必须晚于开始时间`,
								icon: 'none'
							});
							return;
						}

						if (!timeSlot.activity_price) {
							uni.showToast({
								title: `请填写活动时段${i + 1}的时间段${j + 1}的价格`,
								icon: 'none'
							});
							return;
						}

						if (!timeSlot.activity_people_number) {
							uni.showToast({
								title: `请填写活动时段${i + 1}的时间段${j + 1}的总名额`,
								icon: 'none'
							});
							return;
						}
					}
				}

				// 构造提交数据
				const submitData = {
					...this.formData,
					// 转换轮播图数组格式
					activity_banner_arr: this.formData.activity_banner_arr.map(item => ({
						activity_banner_path: item.activity_banner_path,
						activity_sort: item.activity_sort
					}))
				};

				try {
					let response;
					if (this.activity_id) {
						// 如果有activity_id，调用编辑接口
						response = await activity_userActivityInfoUpdate({
							...submitData,
							activity_id: this.activity_id
						});
					} else {
						// 否则调用创建接口
						response = await activity_userActivityInfoCreate(submitData);
					}

					if (response.code === 200) {
						uni.showToast({
							title: this.activity_id ? '编辑成功' : '提交成功',
							icon: 'success'
						});

						// 如果是编辑，可能需要更新activity_id
						if (!this.activity_id && response.content && response.content.activity_id) {
							this.activity_id = response.content.activity_id;
						}

						// 可以在这里添加页面跳转或其他逻辑
						// 例如返回上一页
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						throw new Error(response.message || '操作失败');
					}
				} catch (error) {
					console.error('提交失败:', error);
					uni.showToast({
						title: error.message || '提交失败',
						icon: 'none'
					});
				}
			},

			// 地区选择器方法
			showRegionPicker() {
				this.$refs.regionPopup.open();
			},

			// 地区选择器变化
			async handleRegionChange(e) {
				const value = e.detail.value;
				this.regionValue = value;

				// 如果省份变化，更新城市列表
				if (value[0] !== this.lastProvinceIndex) {
					const provinceId = this.provinces[value[0]].district_id;
					await this.getCities(provinceId);
					this.lastProvinceIndex = value[0];
				}

				// 如果城市变化，更新区县列表
				if (value[1] !== this.lastCityIndex) {
					const cityId = this.cities[value[1]].district_id;
					await this.getAreas(cityId);
					this.lastCityIndex = value[1];
				}
			},

			// 取消地区选择
			cancelRegionSelect() {
				this.$refs.regionPopup.close();
			},

			// 确认地区选择
			confirmRegionSelect() {
				const province = this.provinces[this.regionValue[0]];
				const city = this.cities[this.regionValue[1]];
				const area = this.areas[this.regionValue[2]];

				if (!province || !city || !area) {
					uni.showToast({
						title: '请选择完整的地区',
						icon: 'none'
					});
					return;
				}

				this.selectedRegion = [province.district_name, city.district_name, area.district_name];
				this.formData.regionText = `${province.district_name} ${city.district_name} ${area.district_name}`;

				// 设置地区ID
				this.formData.province_id = province.district_id;
				this.formData.city_id = city.district_id;
				this.formData.area_id = area.district_id;

				this.$refs.regionPopup.close();
			}
		}
	}
</script>
<style scoped lang="scss">
	/* 样式保持不变 */
	.container {
		background-color: #f4f4f4;
		min-height: 100vh;
		padding-bottom: 80px;
	}

	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 12px;
		background-color: #fff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
	}

	.submit-btn {
		height: 44px;
		line-height: 44px;
		text-align: center;
		background-color: #339966;
		color: #ffffff;
		font-size: 16px;
		border-radius: 22px;
	}

	.form-container {
		background-color: #ffffff;
		margin: 12px;
		border-radius: 12px;
		overflow: hidden;
	}

	.form-section {
		padding: 15px;
		border-bottom: 1px solid #f5f5f5;
	}

	.form-section:last-child {
		border-bottom: none;
	}

	.form-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.add-btn {
		display: flex;
		align-items: center;
		color: #339966;
		font-size: 14px;
		font-weight: normal;
	}

	.btn-icon {
		width: 16px;
		height: 16px;
		margin-right: 5px;
	}

	.setting-list {
		margin-top: 10px;
	}

	.setting-item {
		background-color: #f9f9f9;
		border-radius: 8px;
		padding: 10px 15px;
		margin-bottom: 15px;
	}

	.setting-item:last-child {
		margin-bottom: 0;
	}

	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.item-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}

	.delete-btn {
		display: flex;
		align-items: center;
		font-size: 14px;
	}

	.form-row {
		display: flex;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid #f5f5f5;
	}

	.form-row:last-child {
		border-bottom: none;
	}

	.multi-line {
		align-items: flex-start;
	}

	.form-label {
		width: 80px;
		font-size: 15px;
		color: #333;
	}

	.form-input {
		flex: 1;
		font-size: 16px;
		color: #333;
	}

	.form-textarea {
		flex: 1;
		font-size: 15px;
		color: #333;
		min-height: 60px;
		padding: 5px 0;
	}

	.form-picker {
		flex: 1;
	}

	.picker-value {
		font-size: 15px;
		color: #848484;
		padding: 5px 0;
	}

	.beijing {
		width: calc(100% - 24px);
		margin-left: 12px;
		background: #ffffff;
		padding: 15px;
		margin-bottom: 12px;
		border-radius: 12px;
	}

	.image-upload-container {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
	}

	.image-item {
		width: 100px;
		height: 100px;
		margin-right: 10px;
		margin-bottom: 10px;
		position: relative;
	}

	.uploaded-image {
		width: 100%;
		height: 100%;
		border-radius: 4px;
	}

	.delete-icon {
		position: absolute;
		right: -8px;
		top: -8px;
		width: 20px;
		height: 20px;
		background-color: #ff4d4f;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 12px;
	}

	.upload-btn {
		width: 100px;
		height: 100px;
		border: 1px dashed #d9d9d9;
		border-radius: 4px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #666;
		font-size: 12px;
	}

	.image-hint {
		font-size: 12px;
		color: #999;
		margin-top: 5px;
	}

	.carousel-preview {
		margin-top: 15px;
		width: 100%;
		height: 180px;
		border-radius: 8px;
		overflow: hidden;
	}

	.swiper {
		width: 100%;
		height: 100%;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	.region-picker {
		background-color: #fff;
		border-radius: 16px 16px 0 0;
	}

	.picker-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 50px;
		padding: 0 15px;
		border-bottom: 1px solid #f5f5f5;
	}

	.picker-title {
		font-size: 16px;
		font-weight: bold;
	}

	.picker-action {
		font-size: 15px;
		color: #666;
	}

	.picker-action:last-child {
		color: #339966;
	}

	.picker-view {
		height: 300px;
	}

	.picker-view view {
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 16px;
	}
	.refund-popup {
		width: 75vw;
		height: 200px;
		text-align: center;
		background-color: #fff;
		border-radius: 16px;
		overflow: hidden;
		max-width: 400px;
		z-index: 99999999999999999;
	}
	
	.popup-header {
		position: relative;
		padding: 18px 15px;
		text-align: center;
		border-bottom: 1px solid #f5f5f5;
	}
	
	.popup-title {
		font-size: 18px;
		font-weight: 500;
		color: #333;
	}
	
	.popup-close {
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 28px;
		color: #999;
		line-height: 1;
	}
	
	.popup-content {
		padding: 15px;
		max-height: 60vh;
		overflow-y: auto;
	}
	/* 新增自定义弹框样式 */
		.custom-popup-mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 99999;
		}
		
		.custom-popup {
			width: 82vw;
			max-width: 400px;
			background-color: #fff;
			border-radius: 16px;
			overflow: hidden;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		}
		
		.popup-header {
			padding: 20px 15px 10px;
			text-align: center;
		}
		
		.popup-title {
			font-size: 18px;
			font-weight: 500;
			color: #333;
		}
		
		.popup-content {
			padding: 10px 15px 20px;
			text-align: center;
		}
		
		.popup-message {
			font-size: 16px;
			color: #666;
			line-height: 1.5;
		}
		
		.popup-footer {
			border-top: 1px solid #f5f5f5;
			padding: 0;
		}
		
		.confirm-btn {
			width: 100%;
			height: 44px;
			line-height: 44px;
			text-align: center;
			background-color: transparent;
			color: #339966;
			font-size: 16px;
			border-radius: 0;
			border: none;
			margin: 0;
			padding: 0;
		}
		
		.confirm-btn::after {
			border: none;
		}
</style>